<template>
	<section class="scholl" >
		<div class="bg-white">
			<div class="head pt30rem pr30rem pb30rem pl30rem">
			 	<div class="icons  align-right">
			 		<!-- 设置 -->
			 		<router-link :to="'/member/set?isiOS=' + isiOS">
						<i class="iconfont icon-set white set-button"></i>
					</router-link>
					<!-- 消息 -->
					<inform class="news-button"></inform>	
			 	</div>	
		 		<div class="user-info white">
			 		<img v-if="userInfo.user_img" :src="userInfo.user_img" class="Avtar mr20" alt="头像2">
			 		<img v-else-if="user_img" :src="user_img" class="Avtar mr20" alt="头像1">
			 		<img v-if="!user_img && !userInfo.user_img" src="../../assets/member/avatar.png" class="Avtar mr20" alt="头像3">
			 		<div>
			 			<p class="user-name fs34rem bold">
			 				{{userInfo.user_name}}
			 			<!-- 	<span class="user-grade fs18rem ml20rem">
				 				{{userInfo.level}}
				 			</span> -->
				 			<span class="user-grade white pt5rem pb5rem pl30rem pr10rem primary" v-if="userInfo.growth_level == 1"></span>
							<span class="user-grade white pt5rem pb5rem pl30rem pr10rem intermediate" v-if="userInfo.growth_level == 2"></span>
							<span class="user-grade white pt5rem pb5rem pl30rem pr10rem advanced" v-if="userInfo.growth_level == 3"></span>
			 			</p>
			 			 <span class="user-lucky-value fs26rem">
				 			 幸运值：{{userInfo.luck}}
				 		 </span>
			 		</div>		 		
		 		</div>	
			</div>
			<!-- 入门导航 -->
			<entry-nav :lists="lists_info" class="border-b20"></entry-nav>
			<router-link to="/member/order?status=all">
				<div class="size_list layout border-b invite-item pl30rem pr30rem fs30rem">

						<span>我的订单</span>
						<span style="flex: 1;text-align: right">全部</span><i class="iconfont icon-right2 fs20rem c999"></i>

				</div>
			</router-link>
			<!-- 我的订单 -->
			<div class="border-b20 pl30rem pr30rem">
				<ul class="layout flex-end my-list border-bottom">
					<router-link tag="li" to="/member/order?status=waitPay" class="my-list-item pt40rem pb40rem align-center ">
						<img src="../../assets/member/my_Payment_icon.png" class="my-icon mb20rem">
					<!-- 	<span class="my-icon-number" v-if="userInfo.wait_pay" >
							<i class="cxo-red white fs20rem circle" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%">
								{{userInfo.wait_pay}}
							</i>	
						</span> -->
						<i class="my-icon-number cxo-red white fs12 circle align-center pos-abs circle" v-if="userInfo.wait_pay">{{userInfo.wait_pay}}</i>
						<p class="my-name">待付款</p>
					</router-link>
					<router-link tag="li" to="/member/order?status=waitReceipt" class="my-list-item pt40rem pb40rem align-center">
						<img src="../../assets/member/my_wait_icon.png" class="my-icon mb20rem">
						<span class="my-icon-number" v-if="userInfo.wait_deliver">
							<i class="cxo-red white fs12 circle" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%">
								{{userInfo.wait_deliver}}
							</i>
						</span>
						<p class="my-name">待收货</p>
					</router-link>
					<router-link tag="li" to="/member/order?status=waitShare" class="my-list-item pt40rem pb40rem align-center">
						<img src="../../assets/icon12.png" class="my-icon mb20rem">
						<p class="my-name">待分享</p>
					</router-link>
					<router-link tag="li" to="/member/order/Evaluate" class="my-list-item pt40rem pb40rem align-center">
						<img src="../../assets/member/my_remain_icon.png" class="my-icon mb20rem">
						<p class="my-name">待评价</p>
					</router-link>
					<router-link tag="li" to="/member/order/afterSalesOrder" class="my-list-item pt40rem pb40rem align-center">
						<img src="../../assets/member/my_exchange_icon.png" class="my-icon mb20rem">
						<span class="my-icon-number" v-if="userInfo.after_sales" >
							<i class="cxo-red white fs12 circle" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%">
								{{userInfo.after_sales}}
							</i>
						</span>
						<p class="my-name">退换/售后</p>
					</router-link>

				</ul>
				<ul class="numbers-list layout flex-end">
					<router-link tag="li" to="/member/productAttention" class="numbers-list-item pt30rem pb30rem align-center">
						<p class="numbers mb10rem c666">
							<strong>
								{{userInfo.goods_attention}}
							</strong>
						</p>
						<span class="c666 ">商品关注</span>
					</router-link>
					<router-link tag="li" to="/member/attentionShop" class="numbers-list-item pt30rem pb30rem align-center">
						<p class="numbers mb10rem c666">
							<strong>
								{{userInfo.shop_attention}}
							</strong>
						</p>
						<span class="c666 ">关注店铺</span>
					</router-link>	
					<router-link tag="li" to="/member/coupon" class="numbers-list-item pt30rem pb30rem align-center">
						<p class="numbers mb10rem c666">
							<strong>
								{{userInfo.coupons}}
							</strong>
						</p>
						<span class="c666 ">优惠券</span>
					</router-link>	
					<router-link tag="li" to="/member/lookHistory" class="numbers-list-item pt30rem pb30rem align-center">
						<p class="numbers mb10rem c666">
							<strong>
								{{userInfo.browsing_history}}
							</strong>
						</p>
						<span class="c666 ">浏览记录</span>
					</router-link>	
					<router-link tag="li" to="/member/overlist" class="numbers-list-item pt30rem pb30rem align-center">
						<p class="numbers mb10rem c666">
							<strong>
								{{userInfo.ty_over_count}}
							</strong>
						</p>
						<span class="c666 ">往期商品</span>
					</router-link>				
				</ul>
			</div>
			<!-- 其他 -->
			<div class="pl30rem pr30rem fs30rem">
				<router-link to="member/invite">
					<div class="size_list layout border-b invite-item">
						<p class="flex_1 layout  color-purple">							
							<span>邀请好友送惊喜 <img src="../../assets/member/my_gift_icon.png" class="invite-img ml25rem"></span>						
							<i class="iconfont icon-right2 fs20rem c999"></i>
						</p>
					</div>
				</router-link>
				<!-- <router-link to="member/invoice">
					<div class="size_list layout pt30rem pb30rem border-b">
						<p class="flex_1 layout">
							发票管理
							<i class="iconfont icon-right2 fs20rem c999"></i>
						</p>
					</div>
				</router-link> -->
				<router-link to="member/address">
					<div class="size_list layout pt30rem pb30rem border-b">
						<p class="flex_1 layout">
							收货地址
							<i class="iconfont icon-right2 fs20rem c999"></i>
						</p>
					</div>
				</router-link>
				<router-link to="member/join">
					<div class="size_list layout pt30rem pb30rem border-b">
						<p class="flex_1 layout ">
							商家入驻
							<i class="iconfont icon-right2 fs20rem c999"></i>
						</p>
					</div>
				</router-link>
				<router-link to="member/reBusinessIn">
					<div class="size_list layout pt30rem pb30rem border-b">
						<p class="flex_1 layout">
							推荐商家入驻
							<i class="iconfont icon-right2 fs20rem c999"></i>
						</p>
					</div>
				</router-link>
				<div class="size_list layout pt30rem pb30rem c666" @click="contact">
					<p class="flex_1 layout">
						官方客服
						<i class="iconfont icon-right2 fs20rem c999"></i>
					</p>
				</div>
			</div>
			<div style="height:4.071428rem;"></div>
		</div>
	</section>
</template>

<script>
	import EntryNav from "@/components/Entry-nav";
	import Inform from "@/components/Inform";
	import { getUser } from "@/api/member";
	import { userLoginout,getService } from "@/api/member";
	import { iosapp } from "@/utils";
	export default{
	    components:{
	        EntryNav,
	        Inform
		},
		data()
		{
		    return{
		    	isiOS   : '',
               	lists_info: [
               		{
               			id: 0, name: '我的体验', src: require('../../assets/member/my_experience_icon.png'), link: 'member/experience/'
               		},
               		{
               			id: 1, name: '我的预售', src: require('../../assets/member/my_purchase_icon.png'), link: 'member/readyBuy/'
               		},
               		{
               			id: 2, name: '惊喜券', src: require('../../assets/member/my_Surprise_icon.png'), link: 'member/surpriseCoupon/'
               		},
               		{
               			id: 3, name: '体验评星', src:require('../../assets/member/my_rating_icon.png'), link: 'member/experienceStar/'
               		}
               ],
				userInfo : '',
				uid      : window.localStorage.getItem('uid'),
				showApp  : window.sessionStorage.getItem('isapp'),
				user_img : window.sessionStorage.getItem('user_img'),
				img_url  : process.env.IMG_URL,
				username : '',
            }
		},
		created(){ 
			this.loadData();
			this.loadService();
			// this.loginOut();
			
			if(this.showApp){
				iosapp('backAction');
				this.isiOS = '1';
			}
		},
		methods:{
			loadData()
			{
				getUser(this.uid).then( res => {
					this.userInfo = res.data;
					this.userInfo.user_img = this.img_url + res.data.user_img;
				});
			},
			loginOut()
			{
				this.$store.dispatch("logout");
				$toast('退出成功')
				this.$router.replace('/login');
			},
			loadService()
			{
				getService().then(res => {
					this.username = res.data.jiguang_username;
				})
			},
			contact()
			{
				if(!this.uid){
					this.showapp && iosapp('ExperienceLoginAction');
					this.$router.replace('/login?redirect=' + $router.currentRoute.fullPath);
				}
				else if(this.showApp)
				{
					let params = {
						username : this.username
					}
					iosapp('getJim',params)
				}
				else
					this.$router.push('/jim?nickname='+ this.username)
			}
		}
	}
</script>

<style lang="less">
	.head{
		box-sizing: border-box;
		width: 100%;
		height: 270/28rem;
		background-image: url("../../assets/member/my_bg.png");
		background-repeat: no-repeat;
		background-size: 100%;
		.set-button{
			margin-right: 25/16rem;
			font-size: 52/28rem;
		}
		.news-button{
			display: inline-block;
		}
		.news-number{
			display: inline-block;
			width: 40/28rem;
			height: 28/28rem;
			border-radius: 50px;
			color: #ff0036;
			position: absolute;
			top: 26/28rem;
			right: 28/28rem;
			line-height: 1rem;
			font-size: 24/28rem;
		}
		.user-info{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.Avtar{
				width: 158/28rem;
				height: 158/28rem;
				object-fit: cover;
				border-radius: 100%;
			}
			.user-name{
				.user-grade{
					display:inline-block;
					width: 134/28rem;
					height:40/28rem;
					object-fit: cover;
				}
				.primary{
					background: url(../../assets/icon8.png)no-repeat center /100% 100%;
				}
				.intermediate{
					background: url(../../assets/icon10.png)no-repeat center /100% 100%;
				}
				.advanced{
					background: url(../../assets/icon9.png)no-repeat center /100% 100%;
				}
			}
		}		
	}
	.my-list{	
		width: 100%;
		border-bottom: 1px solid #e5e5e5;
		.my-list-item{
			width: 20%;
			height: 110/28rem;
			font-size: 24/28rem;
			color: #333333;
			position: relative;
			.my-icon{
				height: 50/28rem;			
			}
			// .my-icon-number{
			//     width: 18px;
			//     height: 18px;
			//     // line-height: 35/28rem;
			//     text-align: center;
			//     border-radius: 50%;
			//     position: absolute;
			//     top: 24/28rem;
			//     right: 10/28rem;
			// }
			.my-icon-number{
			    width: 20px;
			    height: 20px;
			    line-height: 20px;
			 	top: 24/28rem;
			    right: 10/28rem;
			    text-align: center;
			    border-radius: 50%;
			    position: absolute;
			}
		}		
	}
	.color-purple{
		color: #8344d4;
	}
	.numbers-list{
		.numbers-list-item{
			// height: 195/28rem;
		}
	}
	.invite-img{
		height: 50/28rem;
		position: relative;
    	top: 4px;
	}
	.head * {
		box-sizing: border-box;
	}
	.invite-item{
		height: 110/28rem;
		line-height: 74/28rem;
	}
</style>

